<template>
  <el-dialog
    v-el-drag-dialog
    title="手机动态二维码上传"
    :visible.sync="visible"
    width="500px"
    append-to-body
  >
    <div>
      <div ref="qrCodeRef" style="width: 400px; height: 400px; margin: 0 auto;" />
    </div>
    <div class="tc mt10" style=" font-size: 16px; color: red;">请使用移动设备扫码上传</div>
  </el-dialog>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import { queryUserSelectRedisUUID, getUuidAndUrl } from '@/api'

  export default {
    name: 'PhoneUpload',
    data() {
      return {
        visible: false,
        id: '',
        checkInterval: null
      }
    },
    created() {
    // this.init()
    },
    mounted() {},
    methods: {
      async open(id) {
        return new Promise((resolve) => {
          // this.resolve = resolve;
          this.visible = true
          this.id = id
          this.getUrlAndUuid()
        })
      },
      close() {
        this.visible = false
        this.$refs['qrCodeRef'].innerHTML = ''
      },
      init(uuid, casService) {
        // 生成二维码
        const codeUrl = casService + '/brower/selectUUID?uuid=' + uuid
        this.$nextTick(() => {
          this.creatQrCode(codeUrl)
        })
        // 开启轮询
        this.checkingPay(uuid)
      },

      checkingPay(uuid) {
        const _this = this
        this.checkInterval = setInterval(function() {
          _this.selectFilelistStatus(uuid)
        }, 5000)
      },
      async getUrlAndUuid() {
        const params = {
          id: this.id
        }
        const { status, data } = await getUuidAndUrl(params)
        if (status === 200) {
          this.init(data.uuid, data.casService)
        }
      },
      async selectFilelistStatus(uuid) {
        const res = await queryUserSelectRedisUUID({
          uuid: uuid
        })
        if (res.data) {
          clearInterval(this.checkInterval)
          this.close()
          this.$emit('setUpload', true)
        }
      },
      creatQrCode(url) {
        new QRCode(this.$refs.qrCodeRef, {
          text: url,
          width: 400,
          height: 400,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      }
    }
  }
</script>

<style scoped></style>
